<template>
	<view class="page">
		<!-- 投诉审批模块选择 -->
		<view class="complaint-modules" v-if="currentType === 'complaint'">
			<view class="module-title">投诉审批</view>
			<view class="module-grid">
				<view 
					class="module-item" 
					v-for="module in complaintModules" 
					:key="module.key"
					@click="selectModule(module.key)"
				>
					<view class="module-icon">{{ module.icon }}</view>
					<view class="module-name">{{ module.name }}</view>
					<view class="module-count">{{ getModuleCount(module.key) }}</view>
				</view>
			</view>
		</view>
		
		<!-- 状态Tab切换（只在选择了具体模块后显示） -->
		<view class="tabs" v-if="selectedModule">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'pending' }"
				@click="switchTab('pending')"
			>
				<text>待审批</text>
				<text class="tab-count">{{ getStatusCount('pending') }}</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'approved' }"
				@click="switchTab('approved')"
			>
				<text>已审批</text>
				<text class="tab-count">{{ getStatusCount('approved') }}</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'rejected' }"
				@click="switchTab('rejected')"
			>
				<text>已驳回</text>
				<text class="tab-count">{{ getStatusCount('rejected') }}</text>
			</view>
		</view>
		
		
		
		<!-- 审批列表 -->
		<view class="approval-list">
			<view 
				class="approval-item" 
				v-for="item in filteredApprovalList" 
				:key="item.id"
			>
				<view class="item-header">
					<view class="type-tag" :class="'type-' + item.type">
						{{ item.typeName }}
					</view>
					<text class="time">{{ item.createTime }}</text>
				</view>
				
				<!-- 投诉分类信息展示 -->
				<view class="complaint-classification" v-if="item.type === 'complaint' && item.complaintClassification">
					<view class="classification-tag" :class="'classification-' + (item.complaintType || 'other')">
						<text class="classification-icon">{{ getComplaintTypeIcon(item.complaintType || 'other') }}</text>
						<text class="classification-name">{{ item.complaintTypeName || '其他投诉' }}</text>
					</view>
					<view class="classification-desc" v-if="item.complaintTypeDescription">
						{{ item.complaintTypeDescription }}
					</view>
				</view>
				
				<view class="item-content" @click="navigateToDetail(item)">
					<text class="title">投诉类型：{{ item.complaintTypeName || '其他投诉' }}</text>
					<text class="desc">投诉内容：{{ item.complaintReason || '暂无投诉内容' }}</text>
				</view>
				
				<!-- 操作按钮 - 只在待审批状态显示 -->
				<view class="action-buttons" v-if="currentTab === 'pending' && (item.taskStatus === 'pending' || item.taskStatus === 'in_progress' || !item.taskStatus)">
					<button 
						class="action-btn approve-btn" 
						@click.stop="handleApprove(item)"
						:disabled="item.processing"
					>
						{{ item.processing ? '处理中...' : '通过' }}
					</button>
					<button 
						class="action-btn reject-btn" 
						@click.stop="handleReject(item)"
						:disabled="item.processing"
					>
						{{ item.processing ? '处理中...' : '拒绝' }}
					</button>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty" v-if="approvalList.length === 0 && !loading">
				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
				<text class="empty-text">暂无数据</text>
			</view>
			
			<!-- 加载状态 -->
			<view class="loading" v-if="loading">
				<uni-icons type="spinner-cycle" size="40" color="#999"></uni-icons>
				<text class="loading-text">加载中...</text>
			</view>
		</view>
	</view>
</template>

<script>
import { queryUserFlow, queryComplaintTasks } from '@/api/approval.js'
import { getUserInfo } from '@/utils/auth.js'

export default {
	data() {
		return {
			currentTab: 'pending',
			approvalList: [],
			loading: false,
			userInfo: {},
			// 投诉审批模块相关
			currentType: '',
			selectedModule: '', // 当前选中的模块
			// 投诉审批的4个分类
			complaintModules: [
				{
					key: 'product',
					name: '产品投诉',
					icon: '📦',
					description: '产品质量、规格、功能等问题'
				},
				{
					key: 'service',
					name: '服务投诉',
					icon: '😊',
					description: '服务态度、响应速度等问题'
				},
				{
					key: 'logistics',
					name: '物流投诉',
					icon: '🚚',
					description: '物流配送、运输、仓储等问题'
				},
				{
					key: 'other',
					name: '其他投诉',
					icon: '📝',
					description: '不属于上述分类的其他类型'
				}
			]
		}
	},
	computed: {
		// 过滤后的审批列表
		filteredApprovalList() {
			let filtered = this.approvalList
			
			// 如果是投诉审批，需要按模块和状态过滤
			if (this.currentType === 'complaint' && this.selectedModule) {
				filtered = filtered.filter(item => {
					// 只显示当前选中模块的投诉
					if (item.type !== 'complaint') return false
					return item.complaintType === this.selectedModule
				})
			}
			
			return filtered
		}
	},
	onLoad(options) {
		// 获取传入的状态参数
		if (options.status) {
			this.currentTab = options.status
		}
		
		// 获取传入的类型参数
		if (options.type) {
			this.currentType = options.type
		}
		
		
		this.userInfo = getUserInfo() || {}
		this.loadData()
	},
	onShow() {
		// 页面显示时刷新数据
		if (this.userInfo.username) {
			this.loadData()
		}
	},
	onPullDownRefresh() {
		// 下拉刷新
		this.loadData().finally(() => {
			uni.stopPullDownRefresh()
		})
	},
	methods: {
		// 切换Tab
		switchTab(tab) {
			this.currentTab = tab
			this.loadData()
		},
		
		// 加载数据
		async loadData() {
			if (this.loading) return
			
			this.loading = true
			this.approvalList = []
			
			try {
				// 检查用户信息
				if (!this.userInfo.username) {
					uni.showToast({
						title: '用户信息异常，请重新登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({ url: '/pages/login/login' })
					}, 1500)
					return
				}

				// 调用真实API获取待审批列表
				// 根据当前类型选择API
				let res
				if (this.currentType === 'complaint') {
					// 投诉审批：使用投诉专用API
					try {
						res = await queryComplaintTasks(this.userInfo.username)
						console.log('使用投诉专用API查询结果:', res)
					} catch (error) {
						console.error('投诉专用API查询失败:', error)
						uni.showToast({
							title: '获取投诉数据失败',
							icon: 'none'
						})
						return
					}
				} else {
					// 其他审批：使用通用API
					try {
						res = await queryUserFlow(this.userInfo.username)
						console.log('使用通用API查询结果:', res)
					} catch (error) {
						console.error('通用API查询失败:', error)
						uni.showToast({
							title: '获取审批数据失败',
							icon: 'none'
						})
						return
					}
				}
				
				if (res.code === 200) {
					// 根据当前tab过滤数据
					let filteredData = res.data || []
					
					if (this.currentTab === 'pending') {
						// 待审批：只显示待处理的任务
						filteredData = filteredData.filter(item => 
							item.taskStatus === 'pending' || 
							item.taskStatus === 'in_progress' ||
							!item.taskStatus
						)
					} else if (this.currentTab === 'approved') {
						// 已审批：显示已完成的任务
						filteredData = filteredData.filter(item => 
							item.taskStatus === 'completed' || 
							item.taskStatus === 'approved'
						)
					} else if (this.currentTab === 'rejected') {
						// 已驳回：显示被拒绝的任务
						filteredData = filteredData.filter(item => 
							item.taskStatus === 'rejected' || 
							item.taskStatus === 'cancelled'
						)
					}
					
					// 格式化数据
					this.approvalList = filteredData.map(item => {
						console.log('格式化数据项:', item)
						
						const formattedItem = {
							...item,
							// 确保有ID字段
							id: item.id || item.taskId || item.processInstanceId,
							// 确保有taskId字段
							taskId: item.taskId || item.id,
							// 确保有title字段
							title: item.title || item.taskName || '投诉申请',
							createTime: this.formatTime(item.createTime),
							amount: item.amount ? parseFloat(item.amount).toFixed(2) : '',
							typeName: this.getTypeName(item.processDefinitionKey),
							// 添加task表的NAME字段（审批节点名称）
							taskName: item.taskName || item.name || '审批节点',
							// 添加申请人信息
							applicant: item.applicant || '系统用户',
							// 设置类型字段
							type: this.getApprovalTypeByProcDefKey(item.processDefinitionKey)
						}
						
						console.log('格式化后的数据项:', formattedItem)
						
						// 从流程变量获取投诉分类信息
						if (item.processDefinitionKey === 'complaintProcess') {
							console.log('从流程变量获取投诉分类信息:', item)
							const classificationInfo = this.parseComplaintClassificationFromVariables(item)
							console.log('解析结果:', classificationInfo)
							if (classificationInfo) {
								formattedItem.complaintClassification = true
								formattedItem.complaintType = classificationInfo.type
								formattedItem.complaintTypeName = classificationInfo.typeName
								formattedItem.complaintTypeDescription = classificationInfo.typeDescription
								formattedItem.complaintReason = classificationInfo.reason
								formattedItem.complaintCustomerId = classificationInfo.customerId
								formattedItem.complaintOrderId = classificationInfo.orderId
							} else {
								// 如果解析失败，设置默认分类
								formattedItem.complaintClassification = true
								formattedItem.complaintType = 'other'
								formattedItem.complaintTypeName = '其他投诉'
								formattedItem.complaintTypeDescription = '未分类的投诉'
							}
						}
						
						return formattedItem
					})
					
				} else {
					uni.showToast({
						title: res.message || '获取数据失败',
						icon: 'none'
					})
				}
				
			} catch (error) {
				console.error('加载数据失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				pending: '待审批',
				approved: '已通过',
				rejected: '已驳回',
				completed: '已完成',
				cancelled: '已取消'
			}
			return statusMap[status] || status
		},

		// 获取类型名称
		getTypeName(processDefinitionKey) {
			const typeMap = {
				'leaveProcess': '请假申请',
				'expenseProcess': '费用报销',
				'purchaseProcess': '采购申请',
				'contractProcess': '合同审批',
				'complaintProcess': '投诉申请'
			}
			return typeMap[processDefinitionKey] || '审批流程'
		},
		
		// 根据流程定义Key获取审批类型
		getApprovalTypeByProcDefKey(processDefinitionKey) {
			if (!processDefinitionKey) return 'other'
			
			switch (processDefinitionKey) {
				case 'complaintProcess':
					return 'complaint'
				case 'customerProcess':
				case 'existingCustomerProcess':
				case 'distributorCustomerProcess':
					return 'new' // 客户相关流程都归类为新增审批
				case 'newCustomerProcess':
				case 'newCustomerApprovalProcess':
					return 'new' // 新增用户流程
				case 'returnProcess':
					return 'return'
				default:
					return 'other'
			}
		},

		// 格式化时间
		formatTime(timeStr) {
			if (!timeStr) return ''
			const date = new Date(timeStr)
			const now = new Date()
			const diff = now - date
			
			// 如果是今天
			if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
				return date.toLocaleTimeString('zh-CN', { 
					hour: '2-digit', 
					minute: '2-digit' 
				})
			}
			
			// 如果是昨天
			const yesterday = new Date(now)
			yesterday.setDate(yesterday.getDate() - 1)
			if (date.getDate() === yesterday.getDate()) {
				return '昨天 ' + date.toLocaleTimeString('zh-CN', { 
					hour: '2-digit', 
					minute: '2-digit' 
				})
			}
			
			// 其他情况显示完整日期
			return date.toLocaleString('zh-CN', {
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			})
		},
		
		// 跳转到详情页
		navigateToDetail(item) {
			console.log('点击详情，item数据:', item)
			
			// 检查必要字段
			if (!item.id && !item.taskId) {
				console.error('缺少必要的ID字段:', item)
				uni.showToast({
					title: '数据异常，无法查看详情',
					icon: 'none'
				})
				return
			}
			
			// 使用taskId作为主要ID，如果没有则使用id
			const mainId = item.taskId || item.id
			
			// 根据审批类型跳转到不同的详情页面
			if (item.type === 'complaint') {
				// 投诉审批跳转到投诉模块详情页面，传递完整的投诉数据
				const complaintData = this.formatComplaintData(item)
				uni.navigateTo({
					url: `/pages/complaint/detail?id=${mainId}&data=${encodeURIComponent(JSON.stringify(complaintData))}`
				})
			} else {
				// 其他审批跳转到审批详情页面
				uni.navigateTo({
					url: `/pages/approval/detail?id=${mainId}&taskId=${item.taskId || item.id}`
				})
			}
		},
		
		// 格式化投诉数据
		formatComplaintData(item) {
			// 解析投诉分类信息
			const classificationInfo = this.parseComplaintClassification(item.description)
			
			return {
				id: item.id,
				taskId: item.taskId,
				title: item.taskName || '投诉申请',
				reason: item.complaintReason || item.description || '',
				orderNo: item.complaintOrderId || '',
				customerPhone: item.complaintCustomerId || '',
				status: 'pending',
				complaintTypeName: item.complaintTypeName || classificationInfo?.typeName || '其他',
				complaintType: item.complaintType || classificationInfo?.type || 'other',
				complaintTypeDescription: item.complaintTypeDescription || classificationInfo?.typeDescription || '',
				createTime: item.createTime || classificationInfo?.createTime || new Date().toISOString(),
				updateTime: new Date().toISOString(),
				assignee: item.assignee || '',
				applicant: item.applicant || '',
				processInstanceId: item.processInstanceId || '',
				processDefinitionId: item.processDefinitionId || '',
				processDefinitionKey: item.processDefinitionKey || '',
				attachments: [] // 暂时为空，后续可以从API获取
			}
		},
		
		// 从流程变量解析投诉分类信息
		parseComplaintClassificationFromVariables(item) {
			if (!item) return null
			
			try {
				const classificationInfo = {}
				
				// 从流程变量中获取分类信息
				if (item.complaintTypeName) {
					classificationInfo.typeName = item.complaintTypeName
					classificationInfo.type = this.getComplaintTypeKey(item.complaintTypeName)
				}
				
				if (item.complaintTypeDescription) {
					classificationInfo.typeDescription = item.complaintTypeDescription
				}
				
				if (item.complaintReason) {
					classificationInfo.reason = item.complaintReason
				}
				
				if (item.complaintCustomerId) {
					classificationInfo.customerId = item.complaintCustomerId
				}
				
				if (item.complaintOrderId) {
					classificationInfo.orderId = item.complaintOrderId
				}
				
				if (item.complaintCreateDate) {
					classificationInfo.createTime = item.complaintCreateDate
				}
				
				// 检查是否有分类状态
				if (item.complaintClassification) {
					classificationInfo.classification = item.complaintClassification
				}
				
				// 检查是否有申请ID
				if (item.complaintApplicationId) {
					classificationInfo.applicationId = item.complaintApplicationId
				}
				
				// 检查是否有完整分类信息
				if (item.complaintClassificationInfo) {
					classificationInfo.fullInfo = item.complaintClassificationInfo
				}
				
				// 只有至少有一个分类信息字段才返回
				const hasClassificationInfo = classificationInfo.typeName || 
					classificationInfo.typeDescription || 
					classificationInfo.reason || 
					classificationInfo.customerId || 
					classificationInfo.orderId
				
				return hasClassificationInfo ? classificationInfo : null
			} catch (error) {
				console.error('从流程变量解析投诉分类信息失败:', error)
				return null
			}
		},
		
		// 解析投诉分类信息（保留原方法作为备用）
		parseComplaintClassification(description) {
			if (!description) return null
			
			try {
				// 解析DESCRIPTION_字段中的投诉分类信息
				// 格式：=== 投诉分类信息 ===\n投诉类型: 物流问题\n类型描述: 物流方面的问题\n...
				const lines = description.split('\n')
				const classificationInfo = {}
				
				for (let i = 0; i < lines.length; i++) {
					const line = lines[i].trim()
					
					if (line.includes('投诉类型:')) {
						classificationInfo.typeName = line.split('投诉类型:')[1].trim()
						// 根据类型名称映射到类型key
						classificationInfo.type = this.getComplaintTypeKey(classificationInfo.typeName)
					} else if (line.includes('类型描述:')) {
						classificationInfo.typeDescription = line.split('类型描述:')[1].trim()
					} else if (line.includes('投诉原因:')) {
						classificationInfo.reason = line.split('投诉原因:')[1].trim()
					} else if (line.includes('申请时间:')) {
						classificationInfo.createTime = line.split('申请时间:')[1].trim()
					} else if (line.includes('客户ID:')) {
						classificationInfo.customerId = line.split('客户ID:')[1].trim()
					} else if (line.includes('订单ID:')) {
						classificationInfo.orderId = line.split('订单ID:')[1].trim()
					}
				}
				
				// 如果解析到了基本信息，返回分类信息
				if (classificationInfo.typeName) {
					return classificationInfo
				}
				
				return null
			} catch (error) {
				console.error('解析投诉分类信息失败:', error)
				return null
			}
		},
		
		// 根据投诉类型名称获取类型key
		getComplaintTypeKey(typeName) {
			const typeMap = {
				'物流问题': 'logistics',
				'产品问题': 'product',
				'服务态度': 'service',
				'服务问题': 'service',
				'质量问题': 'product',
				'配送问题': 'logistics',
				'包装问题': 'logistics',
				'其他': 'other'
			}
			return typeMap[typeName] || 'other'
		},
		
		// 获取投诉类型图标
		getComplaintTypeIcon(type) {
			const iconMap = {
				'logistics': '🚚',
				'product': '📦',
				'service': '😊',
				'other': '📝'
			}
			return iconMap[type] || '📝'
		},
		
		
		// 选择投诉模块
		selectModule(moduleKey) {
			this.selectedModule = moduleKey
			this.currentTab = 'pending' // 默认显示待审批
			this.loadData()
		},
		
		
		// 获取模块的投诉数量
		getModuleCount(moduleKey) {
			if (!this.approvalList.length) {
				console.log('getModuleCount - 审批列表为空')
				return 0
			}
			
			const complaintItems = this.approvalList.filter(item => item.type === 'complaint')
			console.log('getModuleCount - 投诉项目:', complaintItems)
			console.log('getModuleCount - 查找模块:', moduleKey)
			
			const filteredItems = complaintItems.filter(item => item.complaintType === moduleKey)
			console.log('getModuleCount - 过滤结果:', filteredItems)
			console.log('getModuleCount - 数量:', filteredItems.length)
			
			return filteredItems.length
		},
		
		// 获取当前模块各状态的数量
		getStatusCount(status) {
			if (!this.selectedModule || !this.approvalList.length) return 0
			
			return this.approvalList.filter(item => {
				if (item.type !== 'complaint' || item.complaintType !== this.selectedModule) {
					return false
				}
				
				if (status === 'pending') {
					return item.taskStatus === 'pending' || 
						   item.taskStatus === 'in_progress' ||
						   !item.taskStatus
				} else if (status === 'approved') {
					return item.taskStatus === 'completed' || 
						   item.taskStatus === 'approved'
				} else if (status === 'rejected') {
					return item.taskStatus === 'rejected' || 
						   item.taskStatus === 'cancelled'
				}
				return false
			}).length
		},
		
		// 处理审批通过
		async handleApprove(item) {
			// 检查item是否存在
			if (!item) {
				console.error('审批项目不存在')
				uni.showToast({
					title: '审批项目不存在',
					icon: 'none'
				})
				return
			}
			
			try {
				// 设置处理状态
				item.processing = true
				
				uni.showLoading({ title: '审批中...' })
				
				// 调用审批通过接口
				const result = await this.approveProcess(item.taskId || item.id)
				
				if (result.code === 200) {
					uni.hideLoading()
					uni.showToast({
						title: '审批通过成功',
						icon: 'success'
					})
					
					// 更新本地状态
					item.taskStatus = 'approved'
					item.processing = false
					
					// 刷新列表
					this.loadData()
				} else {
					uni.hideLoading()
					uni.showToast({
						title: result.message || '审批失败',
						icon: 'none'
					})
					item.processing = false
				}
			} catch (error) {
				uni.hideLoading()
				console.error('审批通过失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
				// 安全地设置processing状态
				if (item) {
					item.processing = false
				}
			}
		},
		
		// 处理审批拒绝
		async handleReject(item) {
			// 检查item是否存在
			if (!item) {
				console.error('审批项目不存在')
				uni.showToast({
					title: '审批项目不存在',
					icon: 'none'
				})
				return
			}
			
			try {
				// 显示拒绝原因输入框
				uni.showModal({
					title: '拒绝原因',
					editable: true,
					placeholderText: '请输入拒绝原因',
					success: async (res) => {
						if (res.confirm && res.content) {
							// 设置处理状态
							item.processing = true
							
							uni.showLoading({ title: '审批中...' })
							
							// 调用审批拒绝接口
							const result = await this.rejectProcess(item.taskId || item.id, res.content)
							
							if (result.code === 200) {
								uni.hideLoading()
								uni.showToast({
									title: '审批拒绝成功',
									icon: 'success'
								})
								
								// 更新本地状态
								item.taskStatus = 'rejected'
								item.processing = false
								
								// 刷新列表
								this.loadData()
							} else {
								uni.hideLoading()
								uni.showToast({
									title: result.message || '审批失败',
									icon: 'none'
								})
								item.processing = false
							}
						}
					}
				})
			} catch (error) {
				uni.hideLoading()
				console.error('审批拒绝失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
				// 安全地设置processing状态
				if (item) {
					item.processing = false
				}
			}
		},
		
		// 审批通过接口调用
		async approveProcess(taskId) {
			const { approveProcess } = await import('@/api/approval.js')
			return await approveProcess(taskId)
		},
		
		// 审批拒绝接口调用
		async rejectProcess(taskId, reason) {
			const { rejectProcess } = await import('@/api/approval.js')
			return await rejectProcess(taskId, reason)
		}
	}
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f5f7fa;
}

/* Tab切换 */
.tabs {
	display: flex;
	background: #ffffff;
	padding: 0 30rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 30rpx 0;
	font-size: 28rpx;
	color: #666666;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.tab-item.active {
	color: #667eea;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background: #667eea;
	border-radius: 2rpx;
}

.tab-count {
	font-size: 22rpx;
	color: #999999;
	background: #f5f5f5;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	min-width: 40rpx;
	text-align: center;
}

.tab-item.active .tab-count {
	background: #e8f0ff;
	color: #667eea;
}

/* 审批列表 */
.approval-list {
	padding: 20rpx 30rpx;
}

.approval-item {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.approval-item:active {
	opacity: 0.8;
}

.item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15rpx;
}

.type-tag {
	padding: 8rpx 16rpx;
	border-radius: 6rpx;
	font-size: 22rpx;
	color: #ffffff;
}

.type-expense {
	background: #ff6b6b;
}

.type-leave {
	background: #4ecb73;
}

.type-purchase {
	background: #ffa502;
}

.type-contract {
	background: #667eea;
}

.time {
	font-size: 24rpx;
	color: #999999;
}

.item-content {
	margin-bottom: 15rpx;
}

.title {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	display: block;
	margin-bottom: 10rpx;
}

.desc {
	font-size: 24rpx;
	color: #666666;
	display: block;
}

.task-name {
	font-size: 22rpx;
	color: #999999;
	display: block;
	margin-top: 6rpx;
	background: #f5f5f5;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	display: inline-block;
}

.item-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.amount {
	font-size: 30rpx;
	font-weight: bold;
	color: #ff6b6b;
}

.status {
	padding: 6rpx 20rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
}

.status.pending {
	background: #fff3e0;
	color: #ff9800;
}

.status.approved {
	background: #e8f5e9;
	color: #4caf50;
}

.status.rejected {
	background: #ffebee;
	color: #f44336;
}

/* 空状态 */
.empty {
	padding: 120rpx 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
	margin-top: 20rpx;
}

/* 加载状态 */
.loading {
	padding: 80rpx 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.loading-text {
	font-size: 26rpx;
	color: #999999;
	margin-top: 20rpx;
}

/* 投诉审批模块选择 */
.complaint-modules {
	background: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
}

.module-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	text-align: center;
}

.module-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.module-item {
	background: #f8f9ff;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	text-align: center;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.module-item:active {
	background: #e8f0ff;
	border-color: #667eea;
	transform: scale(0.98);
}

.module-icon {
	font-size: 48rpx;
	margin-bottom: 15rpx;
}

.module-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.module-count {
	font-size: 24rpx;
	color: #667eea;
	background: #ffffff;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	display: inline-block;
}



/* 投诉分类信息展示 */
.complaint-classification {
	background: #f8f9ff;
	padding: 20rpx;
	margin: 15rpx 0;
	border-radius: 12rpx;
	border-left: 4rpx solid #667eea;
}

.classification-tag {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.classification-icon {
	margin-right: 8rpx;
	font-size: 24rpx;
}

.classification-name {
	font-size: 26rpx;
	font-weight: bold;
	color: #667eea;
}

.classification-desc {
	font-size: 24rpx;
	color: #666666;
	line-height: 1.4;
}

/* 分类标签样式 */
.classification-logistics {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
}

.classification-product {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: #ffffff;
}

.classification-service {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	color: #ffffff;
}

.classification-other {
	background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	color: #ffffff;
}

/* 操作按钮样式 */
.action-buttons {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.action-btn {
	flex: 1;
	padding: 20rpx 30rpx;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.action-btn:disabled {
	opacity: 0.6;
	transform: none !important;
}

.action-btn:not(:disabled):active {
	transform: scale(0.95);
}

.approve-btn {
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.approve-btn:not(:disabled):hover {
	box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.4);
}

.reject-btn {
	background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
	color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
}

.reject-btn:not(:disabled):hover {
	box-shadow: 0 6rpx 16rpx rgba(244, 67, 54, 0.4);
}

/* 按钮加载状态 */
.action-btn:disabled::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20rpx;
	height: 20rpx;
	border: 2rpx solid #ffffff;
	border-top: 2rpx solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>

